<script lang="ts">
import { defineComponent, ref, watch, onMounted, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { getUser } from '../api/User'
export default defineComponent({
  setup() {
    let router: any = useRouter()
    let route: any = useRoute()
    let userid: any = route.query.userid
    console.log(userid)
    //用户主页
    let userDes: any = ref(null)
    console.log('userid=>', userid)
    //获取用户主页数据
    let getUserFun = (userid: any) => {
      getUser(userid).then((data) => {
        console.log('用户主页=>', data)
        userDes.value = data.data
        console.log('用户主页userDes=>', userDes.value)
        // console.log("城市",data.data.location.city.name);
        
      })
    }
    //获取年龄

    onBeforeMount(() => {
      getUserFun(userid) //获取用户信息
    })
    return {
      userDes
    }
  }
})
</script>
<template>
  <div class="uerIntroduce" v-if="userDes">
    <div class="base">
      <h1>基本资料</h1>
      <div class="baselist">
        <ul>
          <li>
            <div class="left">性别</div>
            <div class="right" v-if="userDes.sex">{{userDes.sex==1?'男':'女'}}</div>
          </li>
          <li>
            <div class="left">年龄</div>
            <div class="right">未知</div>
          </li>
          <li>
            <div class="left">所在地区</div>
            <div class="right" v-if="userDes.location">{{userDes.location.province.name }}. {{ userDes.location.city?  userDes.location.city.name: "未知"}}</div>
          </li>
          <li>
            <div class="left">简介</div>
            <div class="right" v-if="userDes.about">{{ userDes.about }}</div>
          </li>
          <li>
            <div class="left">IP归属地</div>
            <div class="right" v-if="userDes.ip_location">{{userDes.ip_location}}</div>
          </li>
          <li>
            <div class="left">实名状态</div>
            <div class="right">已实名</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="base">
      <h1>教育背景</h1>
      <div class="baselist">
        <ul>
          <li>
            <div class="left">学校</div>
            <div class="right" v-if="userDes.graduation">{{userDes.graduation}}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="base">
      <h1>认证信息</h1>
      <div class="baselist">
        <ul>
          <li>
            <div class="left">认证身份</div>
            <div class="right" v-if="userDes.occupation">{{userDes.occupation}}</div>
          </li>
          <li>
            <div class="left">入行年份</div>
            <div class="right" v-if="userDes.entry_year">{{userDes.entry_year}}</div>
          </li>
          <li>
            <div class="left">认证描述</div>
            <div class="right" v-if="userDes.verify_description">{{ userDes.verify_description }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.uerIntroduce {
  padding: 0 20px;
  .base {
    margin-bottom: 30px;
    h1 {
      border: 1px solid #fafafa;
      font-size: 14px;
      font-weight: 600;
      line-height: 55px;
    }
    .baselist {
      ul {
        li {
          display: flex;
          line-height: 38px;
          font-size: 14px;
          .left {
            width: 82px;
            color: #a9a9a9;
          }
          .right {
            flex: 1;
            color: #191919;
          }
        }
      }
    }
  }
}
</style>